<template>
  <div >
    <q-btn icon="close" style="position: absolute; right: 10px;" flat @click="useHeader.close()"></q-btn>
    <div class="menu-title maintenance">
      Check In/Out
    </div>
    <div class="menu-section" >
      <div class="menu-box" v-for="(item, index) in maintenanceRoute" :key="index">
        <div class=" cap" @click="routing(item.path)">
          <div style="height: 4rem;">
            <img class='menu-logo' :src="item.logo"> 
          </div>
          
          <br>
          <div class="menu-text" >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="menu-title report">
      Report
    </div>
    <div class="menu-section" >
      <div class="menu-box" v-for="(item, index) in reportRoute" :key="index">
        <div class=" cap" @click="routing(item.path)">
          <div style="height: 4rem;">
            <img class='menu-logo' :src="item.logo"> 
          </div> <br>
          <div class="menu-text">
          {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="menu-title master">
      Master
    </div>
    <div class="menu-section" >
      <div class="menu-box" v-for="(item, index) in masterRoute" :key="index">
        <div class=" cap" @click="routing(item.path)">
          <div style="height: 4rem;">
            <img class='menu-logo' :src="item.logo"> 
          </div><br>
          <div class="menu-text">
          {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="menu-title settings">
      Settings
    </div>
    <div class="menu-section" >
      <div v-for="(item, index) in settingsRoute" :key="index">
        <div class="menu-box" v-if="item.show">
          <div class=" cap" @click="item.path?routing(item.path): item.function()">
          <div style="height: 4rem;">
            
            <img class='menu-logo' :src="item.logo"> 
            </div>
            <br>
            <div class="menu-text">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="q-pa-sm menu-list">
    <div>
      <div class="q-ml-md cursor-pointer non-selectable">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="auto_stories" />
          </q-item-section>
          <q-item-section  class="menu-item"> Master </q-item-section>
        </q-item>
        <q-menu auto-close fit separate-close-popup>
          <q-list dense style="min-width: 250px;">
            <q-item  class="menu-item" clickable @click="$router.push('/stockItem')">
              <q-item-section>Stock Item Master</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/partsMaster')">
              <q-item-section>Parts Master</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/tasksMaster')">
              <q-item-section>Tasks Master</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/versionMaster')">
              <q-item-section>Version Master</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/assetMaster')">
              <q-item-section>Asset Master</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/qrCodeAliasMaster')">
              <q-item-section>QR code Alias Master</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/qrCodeAliasLocationMaster')">
              <q-item-section>QR code Location Master</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </div>
      <div class="q-ml-md cursor-pointer non-selectable">
        <q-item clickable v-ripple @click="$router.push('/dashboard')">
          <q-item-section avatar>
            <q-icon name="dashboard" />
          </q-item-section>
          <q-item-section  class="menu-item"> Dashboard </q-item-section>
        </q-item>
        </div>

      <div class="q-ml-md cursor-pointer non-selectable">
      <q-item clickable v-ripple @click="$router.push('/checkInout')">
          <q-item-section avatar>
            <q-icon name="compare_arrows" />
          </q-item-section>
          <q-item-section  class="menu-item"> Check In/ Out </q-item-section>
        </q-item>
      </div>

      <div class="q-ml-md cursor-pointer non-selectable">
        <q-item clickable v-ripple @click="$router.push('/')">
          <q-item-section avatar>
            <q-icon name="construction" />
          </q-item-section>
          <q-item-section  class="menu-item"> Maintenance </q-item-section>
        </q-item>
        
        <q-menu auto-close fit separate-close-popup>
          <q-list dense style="min-width: 250px">
            <q-item  class="menu-item" clickable @click="$router.push('/')">
              <q-item-section>Search Maintenance</q-item-section>
            </q-item>
            <q-item  class="menu-item" clickable @click="$router.push('/checkInout')">
              <q-item-section>Check In/ Out</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </div>



      <div class="q-ml-md cursor-pointer non-selectable">
      <q-item clickable v-ripple @click="$router.push('/depot')">
          <q-item-section avatar>
            <q-icon name="train" />
          </q-item-section>
          <q-item-section  class="menu-item"> Depot </q-item-section>
        </q-item>
      </div>

      <div class="q-ml-md cursor-pointer non-selectable">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="align_vertical_bottom" />
          </q-item-section>
          <q-item-section  class="menu-item"> Report & Analysis </q-item-section>
        </q-item>
        <q-menu auto-close fit separate-close-popup>
          <q-list dense style="min-width: 250px">
            <q-item clickable  class="menu-item" @click="$router.push('/nffRecord')">
              <q-item-section>NFF Records</q-item-section>
            </q-item>
            <q-item clickable  class="menu-item" @click="$router.push('/historyReport')">
              <q-item-section>History</q-item-section>
            </q-item>
            
            <q-item clickable  class="menu-item" @click="$router.push('outgoingRecord')">
              <q-item-section>Outgoing Record</q-item-section>
            </q-item>
            <q-item clickable  class="menu-item" @click="$router.push('InoutSummary')">
              <q-item-section>In-out Summary</q-item-section>
            </q-item>
            <q-item clickable  class="menu-item" @click="$router.push('/repairingDetailOverview')">
              <q-item-section>Repairing Details overview</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </div>
      <div class="q-ml-md cursor-pointer non-selectable">
      <q-item clickable v-ripple @click="$router.push('/activityLog')">
          <q-item-section avatar>
            <q-icon name="history" />
          </q-item-section>
          <q-item-section  class="menu-item"> Activity Log </q-item-section>
        </q-item>
      </div>


      <div class="q-ml-md cursor-pointer non-selectable">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="accessibility" />
          </q-item-section>
          <q-item-section  class="menu-item"> Administration </q-item-section>
        </q-item>
        <q-menu auto-close fit separate-close-popup>
          <q-list dense style="min-width: 250px">
            <q-item clickable  class="menu-item"  @click="getEformSchema">
              <q-item-section>
               E-Form
              </q-item-section>
            </q-item>
            <q-item clickable  @click="redirectToUsersAdminPage" class="menu-item">
              <q-item-section>Accounts Management</q-item-section>
            </q-item>
            <q-item clickable  class="menu-item" @click="redirectToUserAdminPage">
              <q-item-section >Change Password</q-item-section>
            </q-item>
           
          </q-list>
        </q-menu>
      </div>

      
      <div class="q-ml-md cursor-pointer non-selectable" v-if="user.is_superuser">
      <q-item clickable v-ripple @click="$router.push('/competenceSettings')">
          <q-item-section avatar>
            <q-icon name="people" />
          </q-item-section>
          <q-item-section  class="menu-item"> Competence Settings </q-item-section>
        </q-item>
      </div>
    </div> -->

    <!-- <div class="login">
      <q-item class="list-item" clickable v-ripple @click="logoutUser()">
        <q-item-section avatar>
          <q-icon name="logout" />
        </q-item-section>
        <q-item-section  class="menu-item"> Logout User </q-item-section>
      </q-item>
    </div> -->

</template>

<script setup lang="ts">
import { resolveDjangoUrl } from 'src/boot/axios';
import { getAdminUrl, getUserAdminUrl } from 'src/services/userService';
import { useUser } from 'src/stores/userStore';
import { useRoute, useRouter } from 'vue-router';

import checkInout from 'src/assets/menu/checkInout.png'
import maintenance from 'src/assets/menu/maintenance.png'
import depot from 'src/assets/menu/depot.png'
import dashboard from 'src/assets/menu/dashboard.png'
import nff from 'src/assets/menu/nff.png'
import history from 'src/assets/menu/history.png'
import outgoing from 'src/assets/menu/outgoing.png'
import inout from 'src/assets/menu/inout.png'
import repair_detail from 'src/assets/menu/repair_detail.png'
import log from 'src/assets/menu/log.png'
import stock from 'src/assets/menu/stock.png'
import parts from 'src/assets/menu/parts.png'
import task from 'src/assets/menu/task.png'
import asset from 'src/assets/menu/asset.png'
import eform from 'src/assets/menu/eform.png'
import management from 'src/assets/menu/management.png'
import key from 'src/assets/menu/key.png'
import lock from 'src/assets/menu/lock.png'
import logout from 'src/assets/menu/logout.png'
import listreport from 'src/assets/menu/listreport.png'
import oldMain from 'src/assets/menu/old_main.png'
import { useHeaderStore } from 'src/stores/headerStore';

const user = useUser();
const router = useRouter();

const useHeader = useHeaderStore()

const maintenanceRoute = [
  {name:'check in/out', path:'/checkInout', logo:checkInout},
  {name:'maintenance', path:'/', logo: maintenance},
  {name:'depot', path:'/depot', logo:depot},
]

const reportRoute = [
  {name:'dashboard', path:'/dashboard', logo:dashboard},
  {name:'NFF report', path:'/nffRecord', logo:nff},
  {name:'history', path:'/historyReport', logo:history},
  {name:'outgoing record', path:'/outgoingRecord', logo:outgoing},
  {name:'in-out summary', path:'/InoutSummary', logo:inout},
  {name:'repairing details overview', path:'/repairingDetailOverview', logo:repair_detail},
  {name:'old maintenance record', path:'/oldMainRecord', logo: oldMain},
  {name:'activities log', path:'/activityLog', logo:log},
  {name:'Report Export', path:'/pdfexport', logo:outgoing},
  {name:'Spare Location', path:'/spareLocation', logo:listreport},
  {name:'Mean time between failure', path:'/meantime', logo:listreport},
  {name:'Obsolescence Management', path:'/obsolescenceManagement', logo:listreport},
  {name:'Battery check Report', path:'/regularCheckManagement', logo:listreport},
  
]

const masterRoute = [
  {name:'Stock Item Master', path:'/stockItem', logo:stock},
  {name:'Parts Master', path:'/partsMaster', logo:parts},
  {name:'Tasks Master', path:'/tasksMaster', logo:task},
  {name:'Asset Master', path:'/assetMaster', logo:asset},
  {name:'QR code Alias Master', path:'/qrCodeAliasMaster', logo:task},
  {name:'QR code Location Master', path:'/qrCodeAliasLocationMaster', logo:task},
]

const settingsRoute = [
  {name:'E-Form', function: ()=>getEformSchema(), logo:eform, show:true},
  {name:'Account Management', function: ()=>redirectToUsersAdminPage(), logo:management, show:true},
  {name:'Change Password', path:'/changepassword', logo:key, show:true},
  {name:'Competence Setting', path:'/competenceSettings', logo:lock, show:user.is_superuser},
  {name:'Logout', function: ()=>logoutUser(), logo:logout, show:true},
]

function goAdmin(){
  const url = `${resolveDjangoUrl()}/admin`
  window.open(url)
}

async function redirectToUserAdminPage() {
  const res = await getUserAdminUrl();
  const { url } = res.data;
  if (url) {
    const djangoUrl = resolveDjangoUrl();
    const redirect = [djangoUrl, url].join('');
    window.location.href = redirect;
  }
}

async function redirectToUsersAdminPage() {
  const res = await getAdminUrl();
  const { url } = res.data;
  if (url) {
    const djangoUrl = resolveDjangoUrl();
    const redirect = [djangoUrl, url].join('');
    window.location.href = redirect;
  }
}

async function getEformSchema() {
  console.log('on');
  
  window.open(`${resolveDjangoUrl()}/cews/eforms`);
}

function logoutUser() {
  user.logout();
  router.push({
    name: 'login',
  });
}

function routing(path:string){
  if (path==router.currentRoute.value.path){
    window.location.href = path
    useHeader.close()
  }else{
    router.push(path)
    useHeader.close()
  }
}

</script>

<style scoped scss>
.menu-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90vh;
  border-radius: 1rem;
}

.menu-item{
  padding: 1rem;
  font-size: 1.4rem;
}

.menu-title{
  margin: 1.4rem 0;
  padding: 0.5rem;
  padding-right: 1.5rem;
  width: 20rem;
  text-align: right;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 0 2rem 2rem 0;
}
.master{
  background-color: #e1635c;
}
.report{
  background-color: #4969b9;
}
.maintenance{
  background-color: #ed9820;
}
.settings{
  background-color: #51a41f;
}

.menu-section{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 3rem;
}
.menu-box{
  margin: 1.5rem;
  text-align: center;
  cursor: pointer;
  width: 8rem;
  height: 8rem;
  margin-bottom: 3rem;
  
}
.menu-logo{
  /* height: 6rem; */
  width: 6rem;
}
.menu-text{
  font-size: 1.2rem;
  font-weight: 500;
  margin: 1rem;
}
</style>
